<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{num1}}</h2>
    <h2>{{num2}}</h2>
    <cpn :number1.sync="num1" :number2.sync="num2" ></cpn>
</div>
<script src="vue/vue.js"></script>
<template id="my-cpn">
<div>
    <h2>{{information}}</h2>
    <h2>{{number1}}</h2>
    <h2>{{dnumber1}} </h2>
    <input type="text" name="" id="" :value="dnumber1" @input="num1Input">
    <h2>{{number2}}</h2>
    <h2>{{dnumber2}} </h2>
    <input type="text" name="" id="" :value="dnumber2" @input="num2Input">
</div>
</template>
<script>
    const cpn = {
        template:'#my-cpn',
        props: {
            number1:Number,
            number2:Number
        },
        data(){
            return {
                information:'信息',
                dnumber1:this.number1,
                dnumber2:this.number2,
            }
        },
        methods: {
            num1Input(event){
                this.dnumber1 = event.target.value;
                //this.$emit('num1change',this.dnumber1);
                this.$emit('update:number1',this.dnumber1)
            },
            num2Input(event){
                this.dnumber2 = event.target.value;
                //this.$emit('num2change',this.dnumber2);
                this.$emit('update:number2',this.dnumber2)
            }
        }
    }
    const vm=new Vue({
        el:'#app',
        data:{
            message:'Hellow World!',
            num1:1,
            num2:2
        },
        methods:{
            num1change(value){
                this.num1=value*1
            },
            num2change(value){
                this.num2=value*1
            },
        },
        computed:{},
        components:{
            cpn
        }
    });
</script>
</body>
</html>